<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">

	<title>附近门店</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/aui.css" />
	<link rel="stylesheet" href="../css/public-head.css" />
	<link rel="stylesheet" type="text/css" href="../css/NearbyStore.css" />
</head>

<body>
	<div class="mui-content " style="background-color: white;width:100vw;">
		<div id="nearby" class="mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
			<a class="mui-control-item mui-active" href="#store1">直营网点</a>
			<a class="mui-control-item " href="#store2">钥匙柜</a>
			<a class="mui-control-item " href="#store3">加油站</a>
			<a class="mui-control-item " href="#store4">充电桩</a>
		</div>

		<div id="store1" class="mui-slider-item mui-control-content mui-active">
			<!-- <div><img src="../image/icon/fdtbj@2x.png" /></div>
			<div class="ku" onclick="tokey_list({{val.shop_id}})">
				<div class="lattice">
					<div class="point1">
						<div class="characters">
							<img src="../image/icon/fyjdh@2x.png" />
							<div class="po1-1"><span style="color: #A0A0A0;">离我最近:</span>房间的说法</div>
						</div>
						<div class="po1-2">
							<div><span> {{val.longitude}}&nbsp;|&nbsp;</span></div>
							<div style="width:200px"><img src="../image/icon/fdingweix@2x.png" />
								<div >&nbsp;广东佛改价</div>
							</div>
						</div>
						<div class="po1-3">&nbsp;1人正在排队&nbsp;</div>
					</div>
					<div class="point2">
						<img src="../image/icon/fccxmd@2x.png" />
					</div>
				</div>
			</div> -->
		</div>
		<div id="store2" class="mui-slider-item mui-control-content ">

			<!-- <div class="ku">
				<div class="lattice">
					<div class="point1">
						<div class="characters">
							<img src="../image/icon/fyjdh@2x.png" />
							<div class="po1-1"><span style="color: #A0A0A0;">离我最近:</span>钥匙柜&nbsp;QXWD-01</div>
						</div>
						<div class="po1-2 po1-2-2 po_1">
							<div><span> 0.28km&nbsp;|&nbsp;</span></div>
							<div><img src="../image/icon/fdingweix@2x.png" /></div>
							<div><span>&nbsp;万达银座负二楼电梯口</span></div>
						</div>
						<div class="po1-3" style="margin-top: 10px;">&nbsp;当前钥匙柜有12空位&nbsp;</div>
					</div>
					<div class="point2">
						<img src="../image/icon/fccxysg@2x.png" />
					</div>
				</div>
				<!-- <div class="select">
					<div class="se1"></div>
					<div class="se2"><span>选择服务</span></div>
				</div>
				<div class="bont">
					<div class="bo1">
						<div class="aui-btn_2">智能存取</div>
					</div>
					<div class="bo2">
						<div class="aui-btn_2 aui-btn-act_2">自行到店</div>
					</div>
					<div class="bo3">
						<div class="aui-btn_2 ">预约下单</div>
					</div>
				</div> -->
		</div>
		<div id="store3" class="mui-slider-item mui-control-content ">
			<!-- 	<div><img src="../image/icon/fdtbj@2x.png" /></div>
			<div class="size">中国石油&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国石化</div>
			<div class="third">
				<div class="petrified">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="pe-1"><span style="color: #A0A0A0;">离我最近:</span>中国石化&nbsp;(长湖加油站)</div>
					<div class="pe-2">
						<div><span> 0.75km&nbsp;|&nbsp;</span></div>
						<div><img src="../image/icon/fdingweix@2x.png" /></div>
						<div><span>&nbsp;青秀区-长湖路17&nbsp;(公务员小区对面)</span></div>
					</div>
					<div class="d">
						<div class="d1">加油站</div>
						<div class="d2">&nbsp;便利店&nbsp;</div>
						<div class="d2 d3">&nbsp;厕所&nbsp;</div>
					</div>
					<div class="do">
						<div><img src="../image/icon/fbaoqian51@2x.png" /></div>
						<div><span style="color: #0A5AFA;">24小时</span>营业</div>
					</div>
				</div>
			</div>

			<div class="empty"></div>
			<div class="third">
				<div class="petrified">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="pe-1"><span style="color: #A0A0A0;">离我最近:</span>中国石化&nbsp;(长湖加油站)</div>
					<div class="pe-2">
						<div><span> 0.75km&nbsp;|&nbsp;</span></div>
						<div><img src="../image/icon/fdingweix@2x.png" /></div>
						<div><span>&nbsp;青秀区-长湖路17&nbsp;(公务员小区对面)</span></div>
					</div>
					<div class="d">
						<div class="d1">加油站</div>
						<div class="d2">&nbsp;便利店&nbsp;</div>
						<div class="d2 d3">&nbsp;厕所&nbsp;</div>
					</div>
					<div class="do">
						<div><img src="../image/icon/fbaoqian51@2x.png" /></div>
						<div><span style="color: #0A5AFA;">24小时</span>营业</div>
					</div>
				</div>
			</div>  -->
			<div>
				<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
				<span class="developed_span">
					暂无内容~~
				</span>
			</div>
		</div>
		<div id="store4" class="mui-slider-item mui-control-content ">
			<!-- <div><img src="../image/icon/fdtbj@2x.png" /></div>
			<div class="third">
				<div class="petrified">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="pe-1 ch-1"><span style="color: #A0A0A0;">离我最近:</span>特来电充电站&nbsp;(金庆盛候车厅)<span style="font-size: 11px; color: #A0A0A0;padding-left: 5px;">官方</span></div>
					<div class="pe-2">
						<div><span> 1.0km&nbsp;|&nbsp;</span></div>
						<div><img src="../image/icon/fdingweix@2x.png" /></div>
						<div><span>&nbsp;青秀区-金湖北路58-2号</span></div>
					</div>
					<div class="e">
						<div><span>充电站</span></div>
						<div class="e1">&nbsp;84人访问&nbsp;</div>
					</div>
					<div class="eo">
						<div class="eo1">
							<div class="eo1-1">快</div>&nbsp;<span>空闲4</span>/共4个&nbsp;</div>
						<div class="eo2">
							<div class="eo2-2">慢</div>&nbsp;<span>空闲3</span>/共5个&nbsp;</div>
					</div>
					<div class="f">
						<div><img src="../image/icon/fbaoqian51@2x.png" /></div>
						<div><span>费用:&nbsp;1.9/度</span> </div>
					</div>
				</div>
				<div class="empty"></div>
				<div class="petrified">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="pe-1 ch-1"><span style="color: #A0A0A0;">离我最近:</span>特来电充电站&nbsp;(金庆盛候车厅)</div>
					<div class="pe-2">
						<div><span> 1.0km&nbsp;|&nbsp;</span></div>
						<div><img src="../image/icon/fdingweix@2x.png" /></div>
						<div><span>&nbsp;青秀区-金湖北路58-2号</span></div>
					</div>
					<div class="e">
						<div><span>充电站</span></div>
						<div class="e1">&nbsp;112人访问&nbsp;</div>
					</div>
				</div> -->
			<div>
				<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
				<span class="developed_span">
					暂无内容~~
				</span>
			</div>
		</div>
	</div>
	</div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script src="../script/template-web.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<!-- 获取门店列表 -->
<script type="text/html" id="store_templet1">
	<div style="height:270px;"></div>
	{{each data as val}}
	<div class="ku" onclick="tokey_list({{val.shop_id}})">
		<div class="lattice">
			<div class="point1">
				<div class="characters">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="po1-1"><span style="color: #A0A0A0;">离我最近:</span>{{val.shop_name}}</div>
				</div>
				<div class="po1-2">
					<!-- <div><span> {{val.longitude}}&nbsp;|&nbsp;</span></div> -->
					<div style="width:200px"><img src="../image/icon/fdingweix@2x.png" />
						<div style="padding-top:10px;">&nbsp;{{val.address}}</div>
					</div>
				</div>
				<!-- <div class="po1-3">&nbsp;1人正在排队&nbsp;</div> -->
			</div>
			<div class="point2">
				<img src="../image/icon/fccxmd@2x.png" />
			</div>
		</div>
	</div>
	{{/each}}
</script>
<!-- 获取钥匙柜列表 -->
<script type="text/html" id="store_templet2">
	<div style="height:270px;"></div>
	{{each data as val}}
	<div class="ku" onclick="tokey_list({{val.shop_id}})">
		<div class="lattice">
			<div class="point1">
				<div class="characters">
					<img src="../image/icon/fyjdh@2x.png" />
					<div class="po1-1"><span style="color: #A0A0A0;">离我最近:</span><span>钥匙柜&nbsp;{{val.imei}}</span></div>
				</div>
				<div class="po1-2 po1-2-2 po_1">
					<!-- <div><span> {{val.longitude}}&nbsp;|&nbsp;</span></div> -->
					<div><img src="../image/icon/fdingweix@2x.png" /></div>
					<div><span>&nbsp;{{val.area}}{{val.addr}}</span></div>
				</div>
				<div class="po1-3" style="margin-top: 10px;">&nbsp;当前钥匙柜有12空位&nbsp;</div>
			</div>
			<div class="point2">
				<img src="../image/icon/fccxysg@2x.png" />
			</div>
		</div>
	</div>
	{{/each}}
</script>

<script type="text/javascript">
	apiready = function() {
		init()
			// 获取钥匙柜列表
		fnGetkeyCabinet();
		// 获取门店列表
		fnGetAListOfStores();

		// 百度地图
		var map = api.require('bMap');
		var safeArea = api.safeArea;
		var HeaderOffset = $api.offset($api.byId('nearby'));
		// alert(JSON.stringify(HeaderOffset))
		map.open({
			rect: {
				x: 0,
				y: HeaderOffset.t + HeaderOffset.h,
				w: api.width,
				h: 260
			},
			zoomLevel: 18,
			showUserLocation: true,
			fixedOn: api.frameName,
			fixed: true
		}, function(ret) {
			if (ret.status) {
				// alert('地图打开成功');
				console.log('地图打开成功');
				map.show();
				map.showUserLocation({
					isShow: true,
					trackingMode: 'none'
				});
			}
		});


	}
	headInner({
			title: "车车侠",
			//headleft
			headl: '<div class="tu_1"><img src="../image/icon/dw-bs@2x.png" alt=""/></div><div class="didian">南宁</div>',
			//headright
			headr: '<div class="tu_2" tapmode onclick="Being()"><img src="../image/icon/xx-bs@2x.png" alt="" /></div>',
			color: "", //默认是蓝色
			padding: "0 0 0", //默认有padding:45px 15px 0;
		})
		//获取门店列表
	function fnGetAListOfStores() {
		// console.log("获取店铺");
		BASE.MYajax({
			'pathName': 'home/getShops',
			'method': ofstores
		});
	}

	function ofstores(ret, err) {
		console.log("获取店铺列表" + JSON.stringify(ret));
		if (ret.code == 200) {

			var html = template('store_templet1', ret);
			document.getElementById('store1').innerHTML = html;

			var mapPostionArr = ret.data;
			// 重制地图
			setTimeout(function() { //使用  setTimeout（）方法设定定时2000毫秒
				// setMapCenter(mapPostion)
				mapPostionArr = mapPostionArr.map(function(item) {
					return {
						'id': item.id,
						'lon': item.longitude,
						'lat': item.latitude
					}
				})
				console.log(JSON.stringify(mapPostionArr));
				addAnnotations(mapPostionArr)
			}, 1000);
		} else {
			reToast(ret, err)
		}
	}
	// 重制地图位置
	function setMapCenter(param) {
		console.log('setMapCenter: ' + JSON.stringify(param));
		var map = api.require('bMap');
		map.setCenter({
			coords: {
				lon: param.longitude,
				lat: param.latitude
			},
			animation: true,
		});
	}

	function addAnnotations(mapPostionArr) {
		var map = api.require('bMap');
		map.addAnnotations({
			annotations: mapPostionArr,
			icon: 'widget://image/store/ccx.png',
			draggable: true
		}, function(ret) {
			if (ret) {
				// alert(ret.id);
				console.log('绘制店铺点： '+JSON.stringify(ret));
			}
		});
	}

	//获取钥匙柜列表
	function fnGetkeyCabinet() {
		console.log("获取钥匙柜");
		BASE.MYajax({
			'pathName': 'keycabinet/index',
			'method': cabinet
		});
	}

	function cabinet(ret, err) {
		console.log("获取钥匙柜钥匙柜钥匙柜" + JSON.stringify(ret));
		if (ret.code == 200) {
			var html = template("store_templet2", ret);
			document.getElementById('store2').innerHTML = html;
		} else {
			reToast(ret, err)
		}
	}

	// 点击钥匙柜进入钥匙柜列表或者门店列表
	function tokey_list(type) {
		api.openWin({
			name: 'order-details_1',
			url: '../html/order-details_1.html',
			pageParam: {
				pid: 2
			}
		});

		// if (type == undefined) {
		// 	// 打开门店
		// 	api.openFrame({
		// 		name: 'New_order-details',
		// 		url: '../html/New_order-details.html',
		// 		pageParam: {
		// 			type_list: 'shops'
		// 		}
		// 	});
		// } else if (type) {
		// 	// 钥匙柜
		// 	api.openFrame({
		// 		name: 'New_order-details',
		// 		url: '../html/New_order-details.html',
		// 		pageParam: {
		// 			type_list: 'key'
		// 		}
		// 	});
		// }
	}





	//跳转消息列表

	/*function MessageCenter() {
		api.openWin({
			name: 'MessageCenter',
			url: '../html/MessageCenter.html'
		});

	}*/



	function New_details() {
		api.openWin({
			name: 'New_order-details',
			url: '../html/New_order-details.html'
		});
	}

	//正在开发中
	function Being() {
		api.toast({
			msg: '敬请期待~',
			duration: 2000,
			location: 'bottom'
		});
	}

	//按钮切换改变自身样式
	var auiBtn = document.getElementsByClassName('aui-btn_0');
	for (var i = 0; i < auiBtn.length; i++) {
		auiBtn[i].addEventListener('click', function() {
			for (var i = 0; i < auiBtn.length; i++) {
				auiBtn[i].setAttribute('class', 'aui-btn_0')
			}
			this.setAttribute('class', 'aui-btn_0 aui-btn-act_0')
		})
	}
	var auiBtnO = document.getElementsByClassName('aui-btn_1');
	for (var i = 0; i < auiBtnO.length; i++) {
		auiBtnO[i].addEventListener('click', function() {
			for (var i = 0; i < auiBtnO.length; i++) {
				auiBtnO[i].setAttribute('class', 'aui-btn_1')
			}
			this.setAttribute('class', 'aui-btn_1 aui-btn-act_1')
		})
	}
	var auiBtnB = document.getElementsByClassName('aui-btn_2');
	for (var i = 0; i < auiBtnB.length; i++) {
		auiBtnB[i].addEventListener('click', function() {
			for (var i = 0; i < auiBtnB.length; i++) {
				auiBtnB[i].setAttribute('class', 'aui-btn_2')
			}
			this.setAttribute('class', 'aui-btn_2 aui-btn-act_2')
		})
	}
	var auiBtnQ = document.getElementsByClassName('aui-btn_3');
	for (var i = 0; i < auiBtnQ.length; i++) {
		auiBtnQ[i].addEventListener('click', function() {
			for (var i = 0; i < auiBtnQ.length; i++) {
				auiBtnQ[i].setAttribute('class', 'aui-btn_3')
			}
			this.setAttribute('class', 'aui-btn_3 aui-btn-act_3')
		})
	}
</script>

</html>
